<template>
  <div>
    <div class="top">
      <Header :head="head" />
      <Food-choice
        :title="head"
        @getList="getList"
        :type="type"
        :params="params"
        @addHead="addHead"
      />
    </div>
    <div class="FoodList">
      <List :list="list" />
      <Load :show="show" @fun="getList" />
    </div>
  </div>
</template>

<script>
import Header from '../common/Header'
import FoodChoice from './FoodChoice'
import List from 'components/common/List'
import Load from '../common/Load'
export default {
  components: {
    Header,
    FoodChoice,
    List,
    Load
  },
  data() {
    return {
      head: this.$route.query.head,
      list: [],
      show: null,
      type: null, //商品类别列表  TypeMenu 中使用
      params: null //记录请求头信息
    }
  },
  methods: {
    //获取店铺列表
    //初始化请求头数据
    modifyParams({ restaurant_category_id }) {
      let { latitude, longitude } = JSON.parse(localStorage.getItem('guess'))
      this.params = {
        latitude,
        longitude,
        offset: 0,
        limit: 20,
        restaurant_category_id,
        restaurant_category_ids: [],
        order_by: 4,
        delivery_mode: '',
        support_ids: ''
      }
      //window.console.log(this.params)
      this.getList()
    },
    getList(Obj) {
      //如果有参数,则解析参数然后发起请求
      if (Obj) {
        let {
          restaurant_category_id,
          restaurant_category_ids,
          delivery_mode,
          support_ids,
          order_by,
          New
        } = Obj
        if (New) this.list = []
        this.params['restaurant_category_id'] = restaurant_category_id
          ? restaurant_category_id
          : this.params['restaurant_category_id']

        this.params['restaurant_category_ids'] = restaurant_category_ids
          ? restaurant_category_ids
          : this.params['restaurant_category_ids']

        this.params['delivery_mode'] = delivery_mode
          ? delivery_mode
          : this.params['delivery_mode']

        this.params['support_ids'] = support_ids
          ? support_ids
          : this.params['support_ids']

        this.params['order_by'] = order_by ? order_by : this.params['order_by']
      }
      this.params['offset'] = this.list.length
      this.show = 1
      this.$http
        .get('https://elm.cangdu.org/shopping/restaurants', {
          params: this.params
        })
        .then(({ body }) => {
          this.list.push(...body)
          this.show = 3
        })
        .catch(() => {
          this.show = 2
        })
    },
    //获取店铺类型
    getType() {
      this.$http
        .get('https://elm.cangdu.org/shopping/v2/restaurant/category')
        .then(({ body }) => {
          //window.console.log(body)
          this.type = body
        })
    },
    //修改标题的方法
    addHead(data) {
      this.head = data
    }
  },
  created() {
    this.getType()
    this.modifyParams({ restaurant_category_id: this.$route.query.id })
  },
  mounted() {}
}
</script>
<style  scoped>
.top {
  position: absolute;
  z-index: 1000;
  width: 100%;
}
.FoodList {
  padding-top: 4.5rem;
  height: 100vh;
  width: 100%;
  overflow: auto;
}
</style>